<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme() + "://"
	+ request.getServerName() + ":" + request.getServerPort()
	+ path + "/";
%>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>留言板</title>
		<link rel="stylesheet" href="default.css" />
		<link rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="kindeditor-min.js"></script>
		<script type="text/javascript" src="zh_CN.js"></script>
		<script>
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="content"]', {
					allowFileManager : true
				});
				K('input[name=clear]').click(function(e) {
					editor.html('');
				});
			});
		</script>
		<script type="text/javascript" src="jquery-1.11.0.min.js"></script>		
		<script type="text/javascript">
		var lastId = null;
		$(document).ready(function(){
 			getList();
		});
		function add(){
			editor.sync();
			var content = document.getElementById('test').value;//获取文本
			$.ajax({
				url:"AddServlet",
		 		type:"POST",
		 		datatype:"json",
		 		data:{
		 			content:encodeURI(content)//防止中文乱码问题，将其进行转码
		 		},
		 		success:function(result){
					if(result.status="OK"){
						debugger;
						var html = '<div class="recods" align="left">'+result.id+":"+content+'</div>';
						$(".list").prepend(html);//在被选元素内容前面加入标签
					}
		 	}});	
		}

		//获取数据
		function getList(){
			$.ajax({
		 		url:"ShowServlet",
		 		type:"get",
		 		datatype:"json",
		 		data:{
			 			lastId:lastId
			 	},
		 		success:function(result){
		 			result =JSON.parse(result);
		 			$.each(result, function(i, item) {
						var html = '<div class="recods" align="left">'+item.id+":"+item.content+'</div>';
						$(".list").append(html);//在被选元素内容后面加入标签
						lastId = item.id;
			 		});
			 		
			 		$(".loadMore").remove();//先将该标签移除
			 		$(".list").append('<div class="loadMore" onclick="getList();" >加载更多</div>');//重新加入该标签
				}
			});
		}
</script>
	</head>
	<body>
		<div class="box">
			<div class="title">留言板</div>
			
			<div class="content">
				<div>
					<textarea name="content" id="test" class="edit">KindEditor</textarea>
					<input type="button" name="clear" class="btn" value="清空内容" />
					<input type="button" onclick="add()" class="btn" value="发表" />
				</div>
			</div>
			
			<div class="list">
			</div>
				
		</div>
	</body>
</html>
